<wicket:extend>
<body>

 <!-- Sidebar -->
    
      <div style="position: relative; background-color: #2D475C; float:left; width: 200px; height: 600px;">
        <div style="padding-top: 10px; margin-left: auto; margin-right: auto; width: 176px;"> 
            <img wicket:id="sidebar" src="side-bar.png" border="0" usemap="#Map" />
            <map name="Map" id="Map">
                <area shape="rect" coords="0,32,176,62" wicket:id="AquaponicsPageLink" href="#" />
                <area shape="rect" coords="2,62,175,92" wicket:id="LightingPageLink" href="#" />
                <area shape="rect" coords="1,92,175,122" wicket:id="SecurityPageLink" href="#" />
                <area shape="rect" coords="0,122,175,152" wicket:id="ClimatePageLink" href="#" />
                <area shape="rect" coords="1,153,175,183" wicket:id="WaterPageLink" href="#" />
            </map>
        </div>
        <div style="position: absolute; bottom: 0; padding: 10px;">
            <img wicket:id="logo" src="logo.png"/>
        </div>
      </div>

  <!-- Select Utility -->

  <div class= "wrapper" style="position: absolute; top: 0; left: 200; height: 609px; width: 800px;">
      <div id="image_map2">
         <img wicket:id="image" src="Utilities.png" width="811" height="518" border="0" usemap="#Map" />
            <map name="Map" id="Map">
            <area shape="rect" coords="5,152,182,313" wicket:id="ClimatePageLink" href="#" />
            <area shape="rect" coords="248,11,415,148" wicket:id="LightingPageLink" href="#" />
            <area shape="rect" coords="473,160,618,325" wicket:id="SecurityPageLink" href="#" />
            <area shape="rect" coords="83,345,214,512" wicket:id="WaterPageLink" href="#" />
            <area shape="rect" coords="399,351,548,516" wicket:id="AquaponicsPageLink" href="#" />
            </map>
      </div>
  </div>
</body>
</wicket:extend>

